<template>
    <div class="boxbody">
        <div class="photo-body">
            <img src="../assets/images/三个网页_03.png" >
        </div>
        <div class="sectionphoto">
            <img src="../assets/images/三个网页_08.png" >

            <div class="wordhan">
                生椰自由卡·限定<span class="wordzi">2</span>大特权

            </div>
        </div>
    <div class="discount">
        <div class="discountbox">
            <p class="discountboxzi"><span class="zizi">特权 &nbsp;</span><span id="boxhan">首杯立享<span id="wenzi1">3.8折</span></span>
</p>
        </div>
        <div class="photo-zhe">
            <img src="../assets/images/三个网页_12.png" >
        </div>
    </div>
    <div class="tequan">
         <p class="discountboxzi"><span class="zizi1">特权2 &nbsp;</span><span id="word-zi">生椰系列5杯特价，最高可省
<span id="word-zizi">115元</span></span>
</p>
    </div>
        <div class="drink">
            <ul class="coffee">
                <li v-for="coffee in  $store.state.shoplist" :key="coffee.id">
                    <img :src="coffee.goodsImg">
                    <p>{{coffee.goodsName}}</p>
                    <p>{{coffee.goodsLowPrice}}元</p>
                </li>    
                
            </ul>
  
           <div class="boxbot">
                 <p>
                     <van-cell is-link @click="showPopup">使用规则</van-cell>
                    <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
                   <div id="hanyu">
                        1.用户开通生椰自由卡可享首杆立享生椰拿铁<br>10.9元及5杯特价饮品的专属权益,具体权益内容如下:<br>
①首杯立享生椰拿铁10.9元(低于3.8折)<br>
*用户开通生椰自由卡，可享以10.9元优惠价格购买1杯【生椰拿铁】单品的权益。<br>
*本权益将以优惠券的形式发送至用户账户，用户可在"我的”—―"优惠券"中查看具体规则并使用。<br>
②5杯特价饮品<br>
*用户开通生椰自由卡，可享以专享优惠价格购5杯指定现制饮品的会员权益。<br>
<span id="hanyu1">*适用饮品:生椰拿铁/椰青冰萃咖啡/耶加-生椰拿铁/云南·生椰拿铁/椰子0K瑞纳冰/杨枝甘露椰子冻/陨石生椰拿铁/抹茶好喝椰/哈斯牛油果椰子冻/瓦尔登蓝椰拿铁/瓦尔登蓝钻瑞纳冰/生椰胶原冻/芒果好喝椰。</span>

                   </div>
                    </van-popup>
                     </p>
                <p>
                    <van-cell is-link @click="showPopup">常见问题</van-cell>
                    <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
                        <div class="zizizi">

                    
                        一、购买问题<br>
1.购买生椰自由卡是否可以开票?<br>
购买成功后,用户可在luckin coffee app/微信小程序<br>中"我的"一―“发票管理”――“付费会员卡开票”，申请开<br>票，开票金额为实际支付金额。
⒉购买生椰自由卡后是否可以退款?<br>
付费会员属于会员权益,一旦购买即开通,不可退款。<br>
3.我购买了瑞幸自由卡后,又购买了生椰自由卡，会员<br>权益是否可以叠加?
您可以同时拥有多张会员卡,但同一订单内仅可使用一<br>张会员卡权益。
4.购买生椰自由卡后如何查看自己的权益?<br>
您可以登录luckin coffee app/微信小程序,在"我的"中进<br>入付费会员卡详情页,查看自己购买的卡及对应具体权益。
    </div>

                     </van-popup>
                </p>
                <p><span class="word99">购买记录</span></p>
                <p><span class="word99">自动管理续费</span></p>
             </div>
        </div>
      <div class="kong">

      </div>
      
      
       <div class="check">
           <div class="yuedu"> 
               
                <van-field name="checkbox" >
  <template #input class="li">
   <van-checkbox v-model="checkbox"  />
    <span class="zhifu">我已阅读并同意<span class="xieyi">《支付协议》、《付费会员服务协议》</span>温馨提示:仅支持开具电子发票，购买完成后可前往"瑞幸幸运会员-购买记录"或"发票管理"中开具发票。</span>
  </template>
</van-field>

        </div>
           <div class="goumai">
                <span class="liji">立即购买￥9.9<span class="liji1">￥19.9</span></span> 
           </div>
       </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
Vue.use(Popup);
export default {
    name:"LuckyBody",
     data() {
    return {
      show: false,
      shoplists:[],
      checkbox: false,
      checkboxGroup: [],
    
        }
    },
   methods: {
      showPopup() {
      this.show = true;
      },
    },
    created(){
        this.$store.dispatch('changeAgeAsync')

    },
}
</script>
<style scoped>
@import url(../assets/rest.css);
@import url(../assets/font_2733385_nx481s79rnn/iconfont.css);
@import url(../assets/font_2733385_km6fhr9bcjg/iconfont.css);
@import url(../assets/font_2733385_0fm5xskzw34c/iconfont.css);
.xieyi{
    color: #8e86b8;
}
.van-field__control:read-only{
    color: white;
}
.zizizi{
 margin-top: 0.35rem;
  margin-left: 0.2rem;
}
.van-popup{
    font-size: 0.12rem;
    text-align: left;
} 
#hanyu1{
    font-weight: 600;
}
#hanyu{
    margin-top: 0.35rem;
   text-align: left;
    text-indent: 0.2rem;
    font-size: 0.12rem;
}
.van-popup--bottom{
    bottom: 0.4rem;
    left: 0.15rem;
    right: 0.1rem;
    width: 92%;
    border-radius: 0.05rem;
} 
.van-cell{
    border-radius: 0.1rem;
    font-weight: 600;
} 
.boxbody{
    width: 100%;
    height: 2rem;
    margin-top: 0.42rem;
    padding-top: 0.4rem;
    background: linear-gradient(#a5b0eb,#d6d8ee,#eeeff4)
}
.boxbody img{
 width: 100%;
 height: 100%;
    
}
.photo-body{
    width: 3.32rem;
    height: 1.92rem;
    /* background-color: aqua; */
    margin-top: 1rem;
    margin: auto;
}
.sectionphoto {
    width: 100%;
    height: 1.4rem;
    background-color: #f5f5f5;
}
.sectionphoto img{
    width: 1.64rem;
    height: 0.98rem;
    margin-left: 0.2rem;
}
.wordhan{
   font-weight: bold;
   margin-top: 0.2rem;
   margin-left: 0.2rem;
} 
.wordzi{
    color: #eb3a00;
    font-size: 0.2rem;
}
.discount{
    width: 100%;
    height:1.66rem;
    /* background-color:palegoldenrod ; */
}
.discountbox{
    width: 3.34rem;
    height: 0.56rem;
    /* background-color: aquamarine; */
    display: flex;
   line-height: 0.56rem;
    margin: auto;
}
.discountboxzi{
margin-left: 0.1rem;
}
.zizi{
    color: #f1ccb2;
    font-size: 0.12rem;
    background-color: #4d54a7;
    display: inline-block;
    width: 0.35rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    border-radius: 0.03rem;
   
}
.zizi1{
    color: #f1ccb2;
    font-size: 0.12rem;
    background-color: #4d54a7;
    display: inline-block;
    width: 0.38rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    border-radius: 0.03rem;
    margin-left: 0.05rem;
}
#boxhan{
    width: 1.12rem;
    height: 0.3rem;
    line-height: 0.3rem;
    display: inline-block;
    /* background-color: #eb3a00; */
    font-weight: bold;
    margin-top: 0.01rem;
        text-align: center;
}
#wenzi1{
    color: #e54c12;
}
.photo-zhe{
    width: 3.34rem;
    height: 1.1rem;
    /* background-color:plum ; */
    margin: auto;
}

.coffee{
    width: 3.5rem;
    height:3.3rem;
    margin: auto;
}
.coffee li {
    width: 0.85rem;
      float: left; 
}
.coffee li img{
    width: 0.6rem;
    height: 0.6rem;
    margin: auto;
}
.coffee p:nth-child(3){
    color: orange;
    font-weight: bold;
    margin-top: 0.05rem;
    margin: auto;
     text-align: center;
    font-size: 0.12rem;
}
.coffee p:nth-child(2){
    color: black;
    font-size: 0.12rem;
    margin-top: 0.1rem;
    margin: auto;
    text-align: center;
}
.tequan{
    width: 3.34rem;
    height: 0.74rem;
    margin: auto;
    line-height: 0.74rem;
}
#word-zi{
    font-weight: bold;
}
#word-zizi{
    color: #e54c12;
}
.boxcoffee{
     width: 3.34rem;
    height: 3.43rem;
 
}
.coffee1{
    width: 3.5rem;
    height: 3.7rem;
    /* background-color: red; */
   display: flex;
   flex-wrap:wrap ;
  
}
.coffee1 li {
    width: 0.84rem;
    height: 1.21rem;
 
}
.coffee1 li img{
    width: 0.6rem;
    height: 0.6rem;
    margin: auto;
}
.coffee1 p:nth-child(3){
    color: orange;
    font-weight: bold;
    margin-top: 0.05rem;
}
.coffee1 p:nth-child(2){
    color: black;
    font-size: 0.12rem;
     margin-top: 0.1rem;
}
.tequan{
    width: 3.34rem;
    height: 0.74rem;
    margin: auto;
    line-height: 0.74rem;
}
#word-zi{
    font-weight: bold;
}
#word-zizi{
    color: #e54c12;
}
.tupian{
    width: 3.34rem;
    height: 0.26rem;
    /* background-color: #4d54a7; */
}
#gao{
   
    height: 1.1rem;
}

.tupian{
     width: 3.34rem;
    height: 0.27rem;
    /* background-color: #e54c12; */
    margin-top: 0.05rem;
    margin: auto;
}
.icon-icon1{
    font-size: 0.3rem;
}
.icon-up{
    font-size: 0.3rem;
}
.boxcoffee{
    display: none;
}
.boxbot{
    width: 3.34rem;
    /* margin-bottom: 3.49rem; */
    height: 2.5rem;
    margin: auto;

}
.boxbot p{
    width: 3.34rem;
    height: 0.51rem;
    background-color: white;
    border-radius: 0.08rem;
    margin-top: 0.08rem;
}
.word99{
    color: black;
    font-size: 0.18rem;
    float: left;
    margin-left: 0.1rem;
    line-height: 0.51rem;
    font-size: 0.14rem;
    font-weight: bold;
}
.check{
    width: 100%;
    height: 1.6rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    /* margin-top:4rem ; */
}
.yuedu{
    width: 3.33rem;
    height: 0.76rem;
    background-color: white;
    margin: auto;
}
.goumai{
    width: 3.36rem;
    height: 0.41rem;
    background-color:#3d458d;
    margin: auto;
    line-height: 0.41rem;
    border-radius: 0.1rem;
    margin-top: 0.4rem;
}
.liji{
    color: #ddcfbc;
    font-weight: 600;
    text-align: center;
    margin-left: 0.8rem;
}
.liji1{
    text-decoration:line-through;
     color: #ddcfbc;
    font-weight: 600;
     text-align: center;
}
.li{
    width: 3%;
    float: left;
}
.zhifu{
    width: 97%;
    font-size: 0.12rem;
     margin-left: 0.1rem;
     float: right;
}
.kong{
    height: 1.5rem;
}
</style>